<template>
  <div
    class="mt-5 max-w-lg mx-auto bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden md:max-w-2xl"
    @click="router.push({name:'Question',query:{id:data.problem_id}})">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img :src="'http://81.70.162.219:7345/upload/' + data.file_table.file_path"
             class="h-48 w-full object-cover md:h-full md:w-48">
      </div>
      <div class="p-8">
        <p class="uppercase select-none tracking-wide text-sm text-indigo-500 font-semibold">
          {{ data.problem_type.replace(/,/g, "   ") }}
        </p>
        <a
          class="block mt-1 select-none text-lg leading-tight font-medium text-black hover:underline dark:text-gray-50">
          {{ data.problem_title }}
        </a>
        <p class="mt-2 text-gray-500 select-none dark:text-gray-400 subpixel-antialiased break-all ">
          {{ data.problem_content }}
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";

defineProps(["data"]);
</script>

<style scoped>

</style>
